<template>
  <el-container style="height:100vh;">
    <el-header>
      <div class="header-logo"></div>
      <menu-template />
      <div class="header-content"></div>
      <div id="controls" class="header-controls">
        <div><i :style="{ backgroundImage: 'url(' + jianPng + ')' }"></i></div>
        <div><i :style="{ backgroundImage: 'url(' + winPng + ')' }"></i></div>
        <div><i :style="{ backgroundImage: 'url(' + closePng + ')' }"></i></div>
      </div>
    </el-header>
    <router-view />
    <footer class="footer">
      <div class="footer-file-select">
        md编辑器
        <!-- <el-select-v2 style="border:0" size="small" v-model="file.value" :options="file.options"
            placeholder="Please select" /> -->
      </div>
      <template v-if="dirPath">
        <div :style="{ cursor: activeFilePath ? 'pointer' : 'no-drop' }" @click="updatePreview"
          v-if="['md'].includes(fileType)" class="footer-eye">
          <i :style="{ backgroundImage: 'url(' + eye + ')' }"></i>
        </div>
        <div class="footer-src">
          <el-tooltip class="box-item" effect="dark" :content="activeFilePath" placement="top">
            <span>{{ activeFilePath }}</span>
          </el-tooltip>
        </div>
      </template>
    </footer>
  </el-container>
</template>


<script lang="ts" setup>
import { storeToRefs } from 'pinia';
import menuTemplate from './menu.vue';
import { computed, reactive } from 'vue';
import useFileStore from '@/store/file';
import jianPng from '@/assets/header/jian.png';
import winPng from '@/assets/header/win.png';
import closePng from '@/assets/header/close.png';
import closeEyePng from '@/assets/file/close_eye.png';
import openEyePng from '@/assets/file/open_eye.png';

const fileStore = useFileStore();
const { activeFilePath, onlyPreview, fileType, dirPath } = storeToRefs(fileStore);

// 文件类型
const file = reactive({
  value: 'md',
  options: [
    {
      label: 'md编辑器',
      value: 'md'
    }
  ]
})

//  预览编辑不同状态图标
const eye = computed(() => {
  return onlyPreview.value ? openEyePng : closeEyePng
});
// 预览编辑
const updatePreview = () => {
  if (!activeFilePath.value) return false;
  fileStore.updateOnlyPreview();
}

</script>

<style scoped lang="scss">
$header-height: 50px;

.el-header {
  height: $header-height;
  background-color: #002b36;
  color: #07a1b2;
  text-align: left;
  position: relative;
  padding-right: 0;
  display: flex;
  align-items: center;


  .header-logo {
    height: 20px;
    width: 20px;
    background-image: url('@/assets/logo.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-right: 10px;
  }

  .header-menu {
    width: $header-height;
    height: 100%;
  }

  .header-content {
    flex: auto;
    -webkit-app-region: drag;
    height: 100%;
    min-width: calc(100% - $header-height*4 - 300px);
  }

  .header-controls {
    display: flex;
    align-items: center;

    >div {
      width: $header-height;
      height: $header-height;
      display: flex;
      align-items: center;
      justify-content: center;

      &:hover {
        background-color: #0d3640;
      }

      // margin: 0 10px;
      i {
        display: block;
        height: 18px;
        width: 18px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
      }
    }
  }
}

.el-main {
  background-color: #f5f7fa;
  text-align: left;
}

.footer {
  color: #19f9b8;
  text-align: left;
  line-height: 30px;
  height: 30px;
  box-sizing: border-box;
  width: 100%;
  padding: 0 10px;
  position: relative;
  width: 100vw;
  font-size: 14px;

  display: flex;
  align-items: center;

  .footer-eye {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    &:hover {
      background-color: rgba($color: #07a1b2, $alpha: 0.3);
    }

    i {
      display: block;
      height: 18px;
      width: 18px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
    }
  }

  .footer-file-select {
    display: flex;
    align-items: center;
    width: 80px;
    color: #fff;
    justify-content: center;
    background-color: #f03;
  }

  .footer-src {
    flex: auto;
    white-space: nowrap;
    /* 防止文本换行 */
    overflow: hidden;
    /* 隐藏溢出的文本 */
    text-overflow: ellipsis;
    /* 显示省略号 (...) */
  }

  &::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-top: 1px solid #555;
  }
}
</style>

<style lang="scss">
.footer {

  .el-select-v2__wrapper,
  .el-select-v2__wrapper .el-select-v2__input-wrapper {
    line-height: 30px;
    margin: 0;
    border: 0;
    background-color: transparent;
    border-radius: 0;

    span {
      color: #07a1b2 !important;
    }
  }
}
</style>